<!-- 车辆使用看板 -->
<template>
  <view>
    <view class="tab">
      <view class="tab__body">
        <view class="tab__body-item tab__body-item--active" v-if="tab === 0">
          <!-- 日历 start -->
          <Carlendar v-model="date" />
          <!-- 日历 end -->

          <!-- 列表 start -->
          <view class="list-loading" v-if="loading">
            <u-loading-icon text="加载中" textSize="18"></u-loading-icon>
          </view>
          <u-list class="user-list" :scrollable="false">
            <!-- <u-list-item v-for="(item, index) in usingList" :key="`usinglist-${index}`">
              <view class="user-list__item">
                <u-avatar randomBgColor size="48" shape="circle" :text="item.carAdmin_dictText.substr(0, 1)"></u-avatar>
                <view class="user-list__info">
                  <view class="user-list__name">{{ item.carAdmin_dictText }}</view>
                  <view class="user-list__car">{{ item.carId_dictText }}</view>
                </view>
                <u-button class="user-list__button user-list__button--using">已预约</u-button>
              </view>
            </u-list-item> -->
            <u-list-item v-for="(item, index) in userList" :key="`userList-${index}`">
              <view class="user-list__item">
                <u-avatar randomBgColor size="48" shape="circle" :text="item.carAdmin_dictText?item.carAdmin_dictText.substr(0, 1):''"></u-avatar>
                <view class="user-list__info">
                  <view class="user-list__name">{{ item.carAdmin_dictText }}</view>
                  <view class="user-list__car">{{ item.carName }}{{ item.carNum }}</view>
                </view>
								<!-- 不可预约 -->
                <u-button
									v-if="item.carState != '1'"
                  class="user-list__button user-list__button--using"
                >
                  {{ item.carState_dictText  }}
                </u-button>
								
								<!-- 可预约 -->
								<template v-else>
									<!-- 已预约 -->
									<template v-if="item.useParking && item.useParking.length" >
										<u-button v-if="item.useParking[0].handlerId != userInfo.empId" style="background: #dd6161;" class="user-list__button" @click="onAppointment(item)">已预约</u-button>
										<u-button v-else class="user-list__button user-list__active" @click="onAppointment(item)">已预约</u-button>
									</template>
									<!-- 预约 -->
									<u-button
									  class="user-list__button"
									  @click="handleOrder(item)"
										v-else
									>预约</u-button>
									
								</template>
              </view>
            </u-list-item>
          </u-list>
          <!-- 列表 end -->
        </view>

        <view class="tab__body-item" v-if="tab === 1"></view>
      </view>
    </view>
  </view>
</template>

<script>
import moment, { unix } from 'moment'
import { mapState } from 'vuex'
import Carlendar from './components/Calendar'
import { getUsingCarInfo, queryById } from '@/api/hr/CarUserInfoList'

export default {
  name: 'CarUserInfoList',
  components: { Carlendar },
  data() {
    return {
      tab: 0,
      date: new Date(),
      loading: false,
      usingList: [],
      userList: [],
    }
  },
  onShow() {
    this.getList()
  },
	computed: {
	  ...mapState(['userInfo']),
	},
  methods: {
    handleOrder(item) {
      if (item.carState !== '1') return

      uni.navigateTo({
        url: `/pages/hr/CarUserInfoForm?info=${JSON.stringify(item)}`,
      })
    },
		// 点击已预约
		onAppointment (record) {
			if (record.useParking[0].handlerId != uni.getStorageSync('userInfo').empId) {
				uni.showToast({
					title:'暂无编辑权限！',
					icon: 'none'
				})
				return false
			}
			
			if(!!record.useParking[0] && record.useParking[0].bpmStatus !== '1' && record.useParking[0].bpmStatus !== '4') {
				// this.$refs.mettingModal.disableSubmit = true
				uni.navigateTo({
				  url: `/pages/hr/CarUserInfoForm?id=${record.useParking[0].id}&disableSubmit=true`,
				})
				
			} else {
				// this.$refs.mettingModal.disableSubmit = false
				uni.navigateTo({
				  url: `/pages/hr/CarUserInfoForm?id=${record.useParking[0].id}&disableSubmit=false`,
				})
			}
		},
    handleChangeTab(tab) {
      this.tab = tab
    },
    async getList() {
      try {
        this.loading = true
        this.usingList = []
        this.userList = []
        await getUsingCarInfo({
          time: moment(this.date).format('YYYY-MM-DD'),
        }).then((res) => {
          // this.usingList = res.result?.records?.[0]?.erpCarUsingList || []
          // this.userList = res.result?.records?.[0]?.erpCarInfoList || []
					// 处理方式:
					// 1、app因为只展示日期当天的车辆使用情况,所以只需要查询当天日期是否在开始日期和到结束日期期间，如果在期间，则显示已预约，不在则显示预约
					// 2、因为有提前归还车辆的概念，所以需要把车辆开始使用日期和归还日期进行对比，则有三种情况
						// 1、提前归还日期小于开始日期，则需要放开可被预约。
						// 2、提前归还日期大于开始日期小于结束日期，app不做考虑
						// 3、提前归还日期大于结束日期，app不做考虑
					if (res.success) {
						let resources = []
						if (res.result != null) {
							res.result.records[0].erpCarInfoList.map((value, index1) => {
								// 循环有多少个车辆类型
								let obj = {};
								obj = { ...value }
								obj.id = value.id; // id值
								obj.key = index1 + '' // 作为唯一标识key
								obj.useParking = [] // 数组 装所有申请车辆的数据
								
								// 循环申请的车辆次数
								res.result.records[0].erpCarUsingList.map((item, index2) => {
									// 判断当前的车辆使用预约和当前的车辆是否相互匹配
									if (item && item.bpmStatus != 1 && item.bpmStatus != 4 && item.carId == value.id) {
										obj.key = obj.key + index2 // 作为唯一标识key
										
										var currentDate = moment(this.date) // 当前日历日期
										var reserveStartDate = moment(item.reserveStartTime) // 车辆预约开始日期
										var reserveEndDate = moment(item.reserveEndTime) // 车辆预约结束日期
										var returnCarDate = item.returnCarTime?moment(item.returnCarTime):'' // 车辆归还日期
										// 三种情况
										// 1、开始日期大于当前日期则直接过滤掉
										if (reserveStartDate.isAfter(currentDate, 'day')) {
											return
										} else {
											// 2、开始日期小于等于当前日期
											// 当开始日期等于当前日期
											if (reserveStartDate.isSame(currentDate, 'day')) {
												// 判断归还日期是否小于等于开始日期，小于开始日期则直接显示预约，大于开始日期则直接显示已预约
												// 当归还日期大于开始日期或者当归还日期不存在
												if ((returnCarDate && returnCarDate.isAfter(reserveStartDate, 'day')) || !returnCarDate) {
														obj.useParking.push(item) // 把对象放入数组中去
												} else {
													// 当归还日期小于开始日期则显示预约
													return
												}
											} else {
												// 当开始日期小于当前日期
												// 这里需要再做二层判断
												// 1、当结束日期小于当前日期则显示预约
												// 2、当结束日期大于当前日期 => 在做两层判断 => 结束日期和归还日期在做比较 
													// 1、当归还日期大于结束日期则直接显示已预约
													// 2、当归还日期小于结束日期 => 在做两层判断
															// 1、当归还日期小于当前日期则显示预约
															// 2、当归还日期大于当前日期则显示已预约
															
												// 结束日期小于当前日期
												if (currentDate.isAfter(reserveEndDate, 'day')) {
													return
												} else {
													// 结束日期大于当前日期
													// 判断结束日期和归还日期
													// 归还日期不存在或者归还日期大于等于结束日期
													if (!returnCarDate || returnCarDate.isAfter(reserveEndDate, 'day') || returnCarDate.isSame(reserveEndDate, 'day')) {
														obj.useParking.push(item) // 把对象放入数组中去
													} else {
														// 归还日期小于结束日期
														if (currentDate.isAfter(returnCarDate, 'day')) {
															// 归还日期小于当前日期
															return
														} else {
															// 归还日期大于当前日期
															obj.useParking.push(item) // 把对象放入数组中去
														}
													}
												}
											}
										}
									}
								})
								resources.push(obj)
							})
						}
						this.userList = resources;
					}
        })
      } finally {
        this.loading = false
      }
    },
  },
  watch: {
    date() {
      this.getList()
    },
  },
}
</script>

<style lang="scss" scoped>
.tab__header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 2rpx;
  background: #fff;
  &-item {
    height: 80rpx;
    line-height: 80rpx;
    padding: 0 86rpx;
    color: #c6c6c6;
    font-size: 32rpx;
    &--active {
      font-weight: bold;
      color: #333333;
      position: relative;
      &::after {
        content: '';
        position: absolute;
        bottom: 6rpx;
        width: 40rpx;
        height: 4rpx;
        background: #1767fa;
        border-radius: 2rpx;
        left: 50%;
        transform: translateX(-50%);
      }
    }
  }
}

.user-list {
  background: #fff;
  margin-top: 20rpx;
  &__item {
    height: 160rpx;
    display: flex;
    padding: 32rpx;
    align-items: center;
  }
  &__info {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0 20rpx;
  }
  &__name {
    font-size: 34rpx;
    color: #333333;
    font-weight: bold;
  }
  &__car {
    font-size: 24rpx;
    color: #7f7f7f;
  }
  &__button {
    display: inline-block;
    width: 160rpx;
    height: 64rpx;
    background: #1767fa;
    padding: 0;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 32rpx;
    border-radius: 4rpx;
    border: none;
    &::before,
    &::after {
      display: none;
    }
    &--using {
      background: #eeeefa;
      color: #999999;
    }
  }
	&__active {
		background: orange;
	}
}
.list-loading {
  display: flex;
  justify-content: center;
  padding-top: 20rpx;
}
</style>
